<template>
	<!-- 完善信息 -->
	<view class="complete-wrapper">
		<view class="navBar">
			<view class="navBar-txt flex align-center justify-center">
				<!-- <image class="back-img" :src="websiteUrl + '/uploads/static/login/back.png'" mode="" @click="back"> -->
				</image>
				完善信息
			</view>
			<view class="upload-section flex align-center justify-center">
				<u-upload :header='header' @on-success="upsuccess" :action="action" :custom-btn="true"  max-count="1" :show-progress="false"  image-mode="aspectFit">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<view class="upload-btn flex align-center justify-center">
								上传头像
							</view>
						</view>
				</u-upload>
			</view>
		</view>
		<view class="complete-content">
			<view class="setting-name flex align-center justify-center">
				<u-input type="text"  v-model="name" placeholder="设置昵称" ></u-input>
				<!-- <input class="input-style" type="text" value="" v-model="name" placeholder="设置昵称" /> -->
			</view>
			<view class="sex-section flex align-center justify-between">
				<view class="img-section">
					<view @click="select(0)" :class="num==0?'active':'noactive'">
						 <u-icon name="man"></u-icon>
					</view>
					
					<!-- <image class="sex-img" :src="websiteUrl + '/uploads/static/login/boy1.png'" mode=""></image> -->
					<text class="sex-txt">善男子</text>
				</view>
				<view class="img-section">
					<!-- <image class="sex-img" :src="websiteUrl + '/uploads/static/login/girl1.png'" mode=""></image> -->
					<view @click="select(1)"  :class="num==1?'active':'noactive'">
						<u-icon name="woman"></u-icon>
					</view>	
					
					<text class="sex-txt">信女子</text>
				</view>
			</view>
			<view class="flex flex-wrap align-center justify-center">
				<view class="pwd-tips">
					密码
				</view>
				<view class="pwd-frame flex align-center">
					<input class="input-txt" type="password" value="" v-model="newPwd" placeholder="请输入登录密码" />
				</view>
			</view>
			<view class="flex flex-wrap align-center justify-center">
				<view class="pwd-tips">
					密码
				</view>
				<view class="pwd-frame flex align-center">
					<input class="input-txt" type="password" value="" v-model="newpassword" placeholder="请确定登录密码" />
				</view>
			</view>
			<button class="submit-btn" type="default" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import {API_BASE_URL} from '@/common/config.js'
	export default {
		data() {
			return {
				
				websiteUrl: '', //图片地址
				action: API_BASE_URL+'/commonupload', //图片上传地址
				name: '',
				newPwd: '',
				newpassword:'',
				num:0,
				lists:'',
				header:{'token': global.token},
				url:''
			}
		},
		onReady() {
			this.websiteUrl = this.$websiteUrl
			console.log(this.websiteUrl)
			// 得到整个组件对象，内部图片列表变量为"lists"
			// this.lists = this.$refs.uUpload.lists;
		},
		methods: {
			upsuccess(e){
				console.log(e)
				// if(res.data.code==401){
				// 	if(uni.getStorageSync('userInfo')){
				// 	  global.token = ''
				// 	  global.userInfo = null
				// 	  uni.removeStorageSync('userInfo')
				// 	}
				// }
				this.url=e.data.url
			},
			select(index){
				this.num=index
			},
			uploadImg() {
				this.$refs.uUpload.upload();
			},
			submit() {
				// let files = [];
				// // 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				// files = this.$refs.uUpload.lists.filter(val => {
				// 	return val.progress == 100;
				// })
				// 如果您不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				// console.log(this.$refs.uUpload.lists[0].url)
				if(!this.name){
					return uni.showToast({
							title: '请输入昵称',
							icon: 'none',
							duration: 1500
						  })
				}
				if(this.newpassword!=this.newPwd){
					return uni.showToast({
							title: '密码不一致',
							icon: 'none',
							duration: 1500
						  })
				}
				

				
				this.$api.post(global.apiUrls.pubstep, {
					nickname: this.name,
					avatar:this.url,
					newpassword: this.newPwd,
					gender:this.num
				}).then(res => {
					console.log('请求成功返回的信息', res);
					
					if(res.data.code==1){
						var userinfo=uni.getStorageSync('userInfo')
						userinfo.step=1
						userinfo.avatar=this.url
						uni.setStorageSync('userInfo',userinfo)
						console.log(uni.getStorageSync('userInfo'))
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/tab01/index'
							})
							// this.$u.route({
							// 	type: 'navigateBack'
							// })
						},1000)
						
					}
				})
			},
			// 返回上一级
			back() {
				this.$u.route({
					type: 'navigateBack'
				})
			}
		}
	}
</script>
<style>
	.noactive{width: 30px; height:30px; border-radius:50%; background: #eee; text-align: center; line-height: 30px;}
	.active{
		width: 30px; height:30px; border-radius:50%; background: #D89A3B; text-align: center; line-height: 30px; color: #fff;
	}
</style>
<style lang="scss" scoped>
	
	.slot-btn {
		width: 160rpx;
		height: 160rpx;
		background-image: url($websiteUrl + '/uploads/static/login/girl.png');
		background-size: 100% 100%;
		border-radius: 50%;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	/deep/ .u-list-item.data-v-0d33af60 {
		width: 160rpx !important;
		height: 160rpx !important;
		border-radius: 50% !important;
	}

	.complete-wrapper {
		width: 100%;
		height: auto;
		min-height: 100vh;
		background-color: #FFFFFF;

		.navBar {
			width: 100%;
			height: calc(var(--status-bar-height) + 262rpx);
			background-image: url($websiteUrl + '/uploads/static/login/complete.png');
			background-size: 100% 100%;
			padding-top: var(--status-bar-height);

			.back-img {
				position: absolute;
				width: 21rpx;
				height: 37rpx;
				left: 35rpx;
			}

			.navBar-txt {
				width: 100%;
				height: 50rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #333333;
				text-align: center;
			}

			.upload-section {
				z-index: 99;
				position: absolute;
				width: 100%;
				height: 160rpx;
				margin-top: 60rpx;

				.upload-img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
				}

				.upload-btn {
					position: absolute;
					width: 152rpx;
					height: 42rpx;
					background: #333333;
					opacity: 0.66;
					border-radius: 21rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 120rpx;
				}
			}
		}

		.complete-content {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;
			opacity: 1;

			.setting-name {
				width: 100%;
				height: 37rpx;
				margin-top: 46rpx;

				.input-style {
					font-size: 26rpx;
					font-weight: 400;
					color: #666666;
					text-align: center;
				}
			}

			.sex-section {
				width: 100%;
				height: 50rpx;
				margin-top: 48rpx;
				margin-bottom: 59rpx;
				padding-left: 174rpx;
				padding-right: 174rpx;

				.img-section {
					display: flex;
					align-items: center;
					height: 50rpx;

					.sex-img {
						width: 50rpx;
						height: 50rpx;
					}

					.sex-txt {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-left: 16rpx;
					}
				}
			}

			.pwd-tips {
				width: 100%;
				height: 42rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-top: 40rpx;
				margin-left: 62rpx;
				margin-bottom: 26rpx;
			}

			.pwd-frame {
				width: 613rpx;
				height: 96rpx;
				background: #F7F7F7;
				padding-left: 35rpx;
				padding-right: 35rpx;
			}

			.input-txt {
				width: 196rpx;
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.submit-btn {
				width: 702rpx;
				height: 98rpx;
				background: #1356FF;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 136rpx;
			}
		}
	}
</style>
